<template>
   <drawer ref="drawer" :show="show" @cancel="cancel" @close="show = false" @confirm="confirm" :title="title">
    <view class="select-content"> 
        <picker-view 
            :value="selectedIndex" 
            indicator-class="picker-indicator" 
            indicator-style="height: 80rpx;" 
            mask-class="picker-mask" 
            mask-style="background-image: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6)), linear-gradient(0deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6));" 
            @change="onPickerChange"
            class="picker-view">
            <picker-view-column>
                <view 
                  class="picker-item" 
                  :class="{ active: selectedIndex[0] === index }" 
                  v-for="(item, index) in options" 
                  :key="index">
                    {{ getItemLabel(item) }}
                </view>
            </picker-view-column>
        </picker-view>
    </view>
   </drawer>
</template>
<script>
import drawer from '@/components/filter-drawer/drawer.vue';
export default {
	components:{drawer},
	props: {
		title: {
			type: String,
			default: '请选择'
		},
		labelKey: {
			type: String,
			default: 'label'
		},
		valueKey: {
			type: String,
			default: 'value'
		}
	},
	data() {
		return {
			options: [],
			selectedIndex: [0],
			selectedValue: null,
			show:false,
		};
	},
	methods:{
		// 获取显示标签
		getItemLabel(item) {
			if (typeof item === 'object' && item !== null) {
				return item[this.labelKey] || item.label || item.name || item.text || JSON.stringify(item);
			}
			return item;
		},
		
		// 获取项目值
		getItemValue(item) {
			if (typeof item === 'object' && item !== null) {
				return item[this.valueKey] || item.value || item.id || item.key || item;
			}
			return item;
		},
		
		open(options, defaultValue = null) {
			this.options = options;
			
			// 设置默认选中值
			if (defaultValue !== null) {
				const index = this.options.findIndex(item => {
					const value = this.getItemValue(item);
					return value === defaultValue;
				});
				this.selectedIndex = [index >= 0 ? index : 0];
			} else {
				this.selectedIndex = [0];
			}
			
			// 设置初始选中值
			this.updateSelectedValue();
			
			this.show = true;
		},
		
		onPickerChange(e) {
			this.selectedIndex = e.detail.value;
			this.updateSelectedValue();
		},
		
		updateSelectedValue() {
			const index = this.selectedIndex[0];
			if (this.options[index]) {
				this.selectedValue = this.options[index];
			}
		},
		
		confirm() {
			this.$emit('confirm', {
				value: this.selectedValue,
				index: this.selectedIndex[0],
				label: this.getItemLabel(this.selectedValue),
				valueKey: this.getItemValue(this.selectedValue)
			});
			this.show = false;
		},
		
		cancel() {
			this.$emit('cancel');
			this.show = false;
		}
	}
};

</script>
<style lang="scss" scoped>
.select-content {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
}

.select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .cancel-btn {
        color: #999;
        font-size: 32rpx;
    }
    
    .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #333;
    }
    
    .confirm-btn {
        color: #007aff;
        font-size: 32rpx;
    }
}

.picker-view {
    width: 100%;
    height: 400rpx;
}

.picker-item {
    line-height: 66rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
}
.picker-item.active {
    color: #0091FF;
    // font-weight: bold;
}

.picker-indicator {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.picker-mask {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6)), 
                      linear-gradient(0deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6));
}
</style>